<script>
import {listForCenterActivity} from "@/api/app/activity";
import Pagination from "@/components/Pagination";
import {submitReg} from "@/api/app/reg";

export default {
  name: "center",
  dicts: ['app_activity_category'],

  components: {
    Pagination
  },
  data() {
    return {
      loading: false,
      activityList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 8
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listForCenterActivity(this.queryParams).then(response => {
        this.activityList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleSignUp(activityId) {
      this.$modal.confirm('确认报名该活动吗？').then(() => {
        // TODO: 调用报名接口
        submitReg({activityId:activityId}).then(res=>{
          this.$modal.msgSuccess("报名成功");
          this.getList();
        })

      }).catch(() => {});
    },
    handleQuery() {
      this.getList();
    }
  }
}
</script>

<template>
  <div class="app-container">
    <el-row>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"  label-width="68px">
        <el-form-item label="活动分类" prop="category">
          <el-select v-model="queryParams.category" placeholder="请选择活动分类" clearable>
            <el-option
              v-for="dict in dict.type.app_activity_category"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in activityList" :key="item.activityId">
        <el-card class="activity-card" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="activity-content">
            <div class="activity-status" :class="{ 'status-full': item.currCount >= item.maxCount }">
              {{ item.currCount >= item.maxCount ? '已满' : '可报名' }}
            </div>
            <h3 class="activity-title">{{ item.title }}</h3>
            <div class="activity-info">
              <p class="description">{{ item.description }}</p>
              <p class="location">
                <i class="el-icon-location"></i>
                {{ item.location }}
              </p>
              <div class="enrollment">
                <span>预约进度</span>
                <el-progress
                  :percentage="Math.round((item.currCount / item.maxCount) * 100)"
                  :format="format => `${item.currCount}/${item.maxCount}`"
                  :status="item.currCount >= item.maxCount ? 'success' : ''"
                />
              </div>
            </div>
            <el-button
              v-if="item.currCount < item.maxCount"
              type="primary"
              size="mini"
              class="sign-up-btn"
              @click="handleSignUp(item.activityId)"
            >立即报名</el-button>
            <div v-else class="full-message">名额已满</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <pagination
      style="background: transparent"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
      :page-sizes="[8, 12]"
      layout="total, sizes, prev, pager, next, jumper"
    />
  </div>
</template>

<style scoped lang="scss">
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  :deep(.el-pagination) {
    margin-top: 20px;
    padding: 16px 0;
    text-align: center;
    background: transparent;
    box-shadow: none;

    .el-pagination__total,
    .el-pagination__sizes .el-input .el-input__inner,
    .el-pagination__jump .el-input .el-input__inner {
      height: 28px;
      background: transparent;
      border: 1px solid #dcdfe6;
      color: #606266;
      font-size: 13px;
    }

    .btn-prev,
    .btn-next,
    .el-pager li {
      background: transparent;
      color: #606266;
      border: 1px solid #dcdfe6;
      font-size: 13px;
      min-width: 28px;
      height: 28px;
      line-height: 28px;
      transition: all 0.3s;

      &:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }

      &.active {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
      }
    }

    .el-pagination__sizes {
      margin: 0 10px;
    }
  }
}

.activity-card {
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .el-card__body {
    padding: 0;
  }
}

.activity-content {
  padding: 24px;
  background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
}

.activity-title {
  margin: 0 0 18px 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.activity-info {
  .description {
    color: #5c6b7f;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 48px;
  }

  .location {
    color: #7f8c9d;
    font-size: 14px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;

    i {
      margin-right: 8px;
      color: #3498db;
    }
  }

  .enrollment {
    background-color: rgba(52, 152, 219, 0.05);
    padding: 15px;
    border-radius: 8px;

    span {
      display: block;
      margin-bottom: 10px;
      color: #34495e;
      font-size: 14px;
      font-weight: 500;
    }

    .el-progress {
      margin-top: 5px;

      :deep(.el-progress-bar__outer) {
        border-radius: 10px;
        background-color: rgba(52, 152, 219, 0.1);
      }

      :deep(.el-progress-bar__inner) {
        border-radius: 10px;
        background: linear-gradient(to right, #3498db, #2980b9);
        transition: width 0.6s ease;
      }

      :deep(.el-progress__text) {
        color: #34495e;
        font-weight: 500;
      }
    }
  }
}

.sign-up-btn {
  margin-top: 20px;
  padding: 10px 28px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-weight: 500;
  letter-spacing: 1px;
  background: linear-gradient(to right, #3498db, #2980b9);
  border: none;
  border-radius: 25px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
  }

  &:active {
    transform: translateY(0);
  }
}

.activity-status {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  background: linear-gradient(to right, #2ecc71, #27ae60);
  color: white;
  box-shadow: 0 2px 8px rgba(46, 204, 113, 0.2);
  transition: all 0.3s ease;

  &.status-full {
    background: linear-gradient(to right, #e74c3c, #c0392b);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
  }
}

.activity-content {
  position: relative;
  padding: 24px;
  background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
}

.full-message {
  margin-top: 20px;
  text-align: center;
  color: #e74c3c;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
}
</style>
